
<!-- 逻辑 -->
<script setup lang="ts">
// 1.导入 ref 函数
import { ref } from "vue";
// 2.将普通变量转为 状态变量（基本类型）
const food = ref('海鲜')
// 4.修改数据-script 中 .value
const addfood = () =>{
  food.value += '小青龙'
}

// ref定义+修改 复杂类型
const xia = ref({
  name:'米饭',
  food:['小龙虾','澳龙'],
  price: 100
})
const changeXia = () =>{
  xia.value.food.push('皮皮虾')
}

</script>

<!-- 结构 -->
<template>

  <!-- 3.使用 -->
  <!-- 4.修改数据 -template中 直接改 -->

  <h2 @click="addfood">{{ food }}</h2>
  <button @click="food += '鱼子酱'">不够吃</button>
  <h3 @click="changeXia">{{ xia }}</h3>
</template>

<!-- 样式 -->
<style scoped></style>